<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayBackdropClass="fui-dropdown-backdrop"
  [cdkConnectedOverlayOrigin]="overlayOrigin"
  [cdkConnectedOverlayHasBackdrop]="hasBackdrop"
  (backdropClick)="hide()"
  (detach)="hide()"
  (positionChange)="onPositionChange($event)"
  [cdkConnectedOverlayPositions]="positions"
  [cdkConnectedOverlayOpen]="visible | async"
>
  <div
    #fuiDropdown
    class="fui-dropdown"
    [ngClass]="classMap"
    (click)="clickDropdown($event)"
    (mouseleave)="mouseLeave()"
    [@horizontalShowHide]='isHorizontal ? (visible | async) : false'
    [@verticalShowHide]='isHorizontal ? false : (visible | async)'
  >
    <div class="fui-dropdown-caret">
      <div class="fui-dropdown-caret-inner"></div>
    </div>
    <div class="fui-dropdown-content">
      <ng-content></ng-content>
    </div>
  </div>
</ng-template>
